<template>
  <div>
    <comp ref="compRef"></comp>
    <button @click="setStr">通过ref在父组件中调用子组件的方法</button>
  </div>
</template>

<script>
import { ref, onMounted } from "@vue/composition-api";
import comp from "./comp";
export default {
  components: {
    comp
  },
  setup(props, ctx) {
    const compRef = ref(null);

    onMounted(() => {
      console.log("compRef.value:", compRef.value);
      /*
          compRef.value: VueComponent {_uid: 6, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
        */
      /** 能拿到所有子组件setup里return{}暴露的东西*/
      // compRef.value.setStr(); // ←这里拿到了子组件暴露出来的setStr方法
    });

    const setStr = () => {
      compRef.value.setStr();
    };

    return {
      compRef,
      setStr
    };
  }
};
</script>

<style lang="scss" scoped></style>
